import Editor from '../../components/Editor'
import { Cell, Input, hooks, Uploader, ActionSheet, Button, NavBar } from 'react-vant'
import styles from './index.module.less'
import { Arrow } from '@react-vant/icons';
import { useState } from 'react'
import { useNavigate } from 'react-router'
import toast from 'react-hot-toast'
import axios from 'axios'



const actions = [
  { name: 'dog' },
  { name: 'cat' },
]
export default function petPublish() {
  const [state, updateState] = hooks.useSetState({  // 标题
    title: '',
  })
  const [html, setHtml] = useState('')//编辑器内容
  const [petImg, setPetImg] = useState('')
  const [visible, setVisible] = useState(false)

  const [category, setCategory] = useState('狗')
  const navigate = useNavigate()
    const onSelect = (action) => {
    setCategory(action.name)
    setVisible(false)
  }
  const onPublish=()=>{
    if (html.length <= 11) {
      toast.error('请输入走失内容')
      return
    } if (!state.title) {
      toast.error('请输入品种')
      return
    }
    if (!state.contact) {
      toast.error('请输入联系方式')
      return
    }
    if (!state.feature) {
      toast.error('请输入特征')
      return
    }
    axios.post('/petpublish',{
      pet_content:html,
      pet_img:petImg,
      pet_type:category,
      pet_breed:state.title,
      pet_contact:state.contact,
      pet_feature:state.feature,
    }).then(res=>{
      console.log(res,'res');

      
    })
       
  }

  return (
    <div className={styles['pet-publish']}>
      <div className={styles['back']}>
        <NavBar
          title="寻宠启事"
          onClickLeft={() => navigate(-1)}
        />
      </div>
      <div className={styles['editor']}>
        <Editor html={html} setHtml={setHtml} />

      </div>
      <div className={styles['pet-wrap']}>
        <div className={styles['pet-cell']}>
          <Cell>
            <Input
              prefix={'品种：'}
              value={state.title}
              onChange={title => updateState({ title })}
              placeholder='请输入品种'
              clearable
            />
          </Cell>
        </div>
        <div className={styles['pet-cell']}>
          <Cell>
            <Input
              prefix={'联系方式：'}
              value={state.contact}
              onChange={contact => updateState({ contact })}
              placeholder='请输入联系方式'
              clearable
            />
          </Cell>
        </div>
        <div className={styles['pet-cell']}>
          <Cell>
            <Input
              prefix={'特征：'}
              value={state.feature}
              onChange={feature => updateState({ feature })}
              placeholder='请输入特征'
              clearable
            />
          </Cell>
        </div>
        <div className={styles['pet-cell']}></div>
        <div className={styles['pet-cell']}>
          <Cell>
            <Uploader
              uploadText='上传图片'
              accept='*'
              maxCount={1}
              onChange={v => setPetImg(v[0].url)}
              
            />
          </Cell>
        </div>
        <div className={styles['pet-cell']}>
          <Cell>
            <div className={styles['select']}>
              <span> 选择分类：</span>
              <span className={styles['select-item']} onClick={() => setVisible(true)}>{category} <Arrow /> </span>
            </div>
          </Cell>

          <ActionSheet
            visible={visible}
            onCancel={() => setVisible(false)}
            onSelect={onSelect}
            actions={actions}
          />
        </div>
        <div className={styles['btn']}>
          <Cell>
            <Button type='primary' block onClick={onPublish} >发布</Button>

          </Cell>
        </div>
      </div>
    </div>

  )
}
